<template>
  <div class="sector userinfoContainer">
    <el-avatar :size="150" :src="circleUrl"></el-avatar>
    <div class="userinfos">
      <el-form ref="currentUserData" :model="currentUserData" label-width="150px">
        <el-form-item label="账户名">
          <el-input v-model="currentUserData.account"></el-input>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="currentUserData.nickName"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="currentUserData.password"></el-input>
        </el-form-item>
        <el-form-item label="权限" label-width="150px">
          <el-radio-group v-model="currentUserData.permission">
            <el-radio border v-model="currentUserData.permission" label="0">禁用</el-radio>
            <el-radio border v-model="currentUserData.permission" label="1">管理员</el-radio>
            <el-radio border v-model="currentUserData.permission" label="5">销售员</el-radio>
            <el-radio border v-model="currentUserData.permission" label="9">超级管理员</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="头像" label-width="150px">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:3000/admin/uploadUserAvatar"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :headers="headers"
          >
            <img
              v-if="newAvatarUrl!=''"
              :src="'http://localhost:3000/temp/'+newAvatarUrl"
              class="avatar"
              alt="点击上传头像"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="confirmEdit">确 定</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState: publicState,mapMutations:publicMutations } = createNamespacedHelpers("publicStore");
const { mapActions } = createNamespacedHelpers("admin");

export default {
  data() {
    return {
      currentUserData: {
        account: "admin01",
        password: "admin01",
        nickName: "admin01",
        permission: 5,
        clientList: [],
        insureOrdList: [],
        claimOrdList: [],
        avatarUrl: "1600847868294-Aulos_icon.png",
      },
      newAvatarUrl: "",
      headers: {
        Authorization: "Bearer " + localStorage.token,
      },
    };
  },
  created() {
      this.setNowBreadcrumb("modData")
  },
  computed: {
    ...publicState(["currentUser"]),
    circleUrl() {
      return this.currentUserData.avatarUrl;
    },
  },
  mounted() {
    this.currentUserData = this.currentUser;
    // console.info(this.currentUser);
  },
  methods: {
    ...mapActions(["modUser"]),
    ...publicMutations(["setNowBreadcrumb"]),
    async confirmEdit() {
    this.currentUserData.avatarUrl=this.newAvatarUrl
      let result = await this.modUser(this.currentUserData);
      if (result.status) {
        this.$notify({
          title: "提示",
          message: "修改成功",
        });
      } else {
        this.$notify({
          title: "提示",
          message: "修改失败",
        });
      }
    },
    handleAvatarSuccess(res, file) {
      if (res.status) {
        this.newAvatarUrl = res.data;
      }
    },
    beforeAvatarUpload(file) {
      const isJPGorPNG =
        file.type === "image/jpeg" || file.type === "image/png";
      const isLt20M = file.size / 1024 / 1024 < 20;

      if (!isJPGorPNG) {
        this.$message.error("上传头像图片只能是 JPG 或 PNG 格式!");
      }
      if (!isLt20M) {
        this.$message.error("上传头像图片大小不能超过 20MB!");
      }
      return isJPGorPNG && isLt20M;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../assets/scss/public/sector.scss";
.userinfoContainer {
  display: flex;
  .userinfos {
    min-height: 150px;
    // width: 100%;
    flex-grow: 1;
  }
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
